<template>
  <div>
    <!-- 搜索条件 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="字典列表">
            <el-input v-model="dictParam.nameFater" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clear">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryDict">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 新增按钮 -->
    <el-row>
      <el-col :span="24">
        <el-button type="danger" @click="putawayVisible = true">新增</el-button>
      </el-col>
    </el-row>

    <!-- 字典列表 -->
    <el-row>
      <el-col :span="4">
        <el-menu
          style="margin-top: 10px; background-color: aliceblue"
          mode="vertical"
          text-color="black"
          active-text-color="blue"
        >
          <el-menu-item
            :index="dicts.id + ''"
            v-for="dicts in dictData"
            :key="dicts.id"
            @click="selectDict(dicts.id)"
            >{{ dicts.name }} 编码:{{ dicts.id }}</el-menu-item
          >
        </el-menu>
      </el-col>
      <el-col :span="18">
       <!-- 放表格数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span
            :style="
              scope.row.status === 0 ? { color: 'red' } : { color: 'blue' }
            "
            >{{ scope.row.status === 0 ? "禁用" : "启用" }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="updateDict(scope.row)">编辑</el-button>
          <el-button @click="delDict(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </el-col>
    </el-row>

    <!-- 分页部分 -->
    <el-row>
      <el-col class="offset">
        <el-pagination
          background
          :page-sizes="[3, 5, 10, 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next"
          @next-click="nextPage"
          @prev-click="prevPage"
          @size-change="sizeChange"
          @current-change="currentPage"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 编辑字典弹框 -->
    <el-dialog :visible.sync="dialogVisible" title="编辑字典" :append-to-body="true">
      <el-form :model="formData" :rules="formRules" ref="form">
        <!-- 表单项定义 -->
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateDictSubmit">保存</el-button>
      </div>
    </el-dialog>

    <!-- 新增字典弹框 -->
    <el-dialog title="字典新增" :visible.sync="putawayVisible">
      <el-form :model="addParam" :rules="formRules" ref="addform">
        <!-- 表单项定义 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="putawayVisible = false">取消</el-button>
        <el-button type="primary" @click="addictSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
      
    <script>
export default {
  data() {
    return {
      putawayVisible: false,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      departs: [],
      addParam: {
        id: "",
        parentId: "",
        name: "",
        status: "1",
        remark: "",
      },
      dictParam: {
        nameFater: "",
      },
      dictData: [],
      tableData: [],
      selectedDict: 1, // 表格数据
      dialogVisible: false, // 编辑弹窗是否可见
      formData: {
        // 编辑表单数据
        id: "",
        name: "",
        status: "",
        remark: "",
      },
      formRules: {
        // 表单验证规则
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        parentId: [
          { required: true, message: "编码不能为空", trigger: "blur" },
        ],
        remark: [{ required: false, message: "备注不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    selectDict(id) {
      this.selectedDict = id;
      this.queryDictDetail();
    },
    clear() {
      this.dictParam.nameFater = "";
    },
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryDictDetail();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryDictDetail();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryDictDetail();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryDictDetail();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryDictDetail();
    },
    queryDict() {
      let param = {};
      param.nameFater = this.dictParam.nameFater;
      this.$axios.post("api/dict/queryDicts", param).then((res) => {
        this.dictData = res.data.data;
        this.queryDictDetail()
      });
    },
    queryDictDetail() {
      //带分页参数pageNum,pageSize
      let param = {};
      param.parentId = this.selectedDict;
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = param;
      this.$axios.post("api/dict/queryDictDetail", pageParam).then((res) => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.tableData = pageData.list;
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        }
      });
    },
    delDict(val) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("api/dict/delDict/" + val).then((res) => {
            if (res.data.code == 200) {
              //发删除请求
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.queryDictDetail();
            }else if(res.data.code == 2002){
              this.$message({
                type: "erro",
                message: "无权限进行此操作!",
              });
            }
          });
        })
        .catch(() => {});
    },
    addictSubmit() {
      this.addParam.parentId = parseInt(this.addParam.parentId);
      // 调用表单的验证方法
      this.$refs.addform.validate((valid) => {
        if (valid) {
          // 表单验证通过后，执行保存操作
          this.$axios
            .post("api/dict/addDict", this.addParam)
            .then((res) => {
              if (res.data.code === 200) {
                this.putawayVisible = false;
                this.queryDict();
              } else {
                // 处理保存失败情况
                console.error(
                  "Error occurred while adding dictionary:",
                  res.data.msg
                );
                // 可以添加错误处理逻辑，比如提示用户保存失败
                this.$message.error("保存失败，请稍后重试");
              }
            })
            .catch((error) => {
              // 处理保存失败情况
              console.error("Error occurred while adding dictionary:", error);
              // 可以添加错误处理逻辑，比如提示用户保存失败
              this.$message.error("保存失败，请稍后重试");
            });
        } else {
          // 如果表单验证未通过，可以给用户提示错误信息
          this.$message.error("表单数据验证失败，请检查输入");
        }
      });
    },

    updateDict(row) {
      // 将弹窗设置为可见状态
      this.dialogVisible = true;
      // 将表单数据设置为当前行的数据
      this.formData = {
        id: row.id,
        name: row.name,
        status: row.status.toString(),
        remark: row.remark,
      };
    },
    // 点击保存按钮时触发
    updateDictSubmit() {
      // 调用表单的验证方法
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过后，执行保存操作
          this.$axios
            .post("api/dict/updateDict", this.formData)
            .then((res) => {
              if (res.data.code === 200) {
                this.dialogVisible = false;
                this.queryDictDetail();
              }
            })
            .catch((error) => {
              // 处理保存失败情况
              console.error("Error occurred while updating dictionary:", error);
              // 可以添加错误处理逻辑，比如提示用户保存失败
              this.$message.error("保存失败，请稍后重试");
            });
        } else {
          // 如果表单验证未通过，可以给用户提示错误信息
          this.$message.error("表单数据验证失败，请检查输入");
          return false;
        }
      });
    },
  },
  created() {
    this.queryDictDetail();
    this.queryDict();
  },
};
</script>
      
  <style scoped>
.offset {
  margin-left: 270px;
}
</style>